<template>
    <div class="proItem">
        <div @click="goDetails(information.pid)">
            <img :src="information.smallImg" alt="" class="proItemImg" />
        </div>
        <p class="p1" @click="goDetails(information.pid)">
            {{ information.name }}
        </p>
        <p class="p2" @click="goDetails(information.pid)">
            {{ information.enname }}
        </p>
        <p class="p3" @click="goDetails(information.pid)">
            ￥{{ information.price | capitalize(small) }}
        </p>
        <slot></slot>
    </div>
</template>

<script>


export default {
    name: "ProItem",
    // 接收数据
    props: {
        information: {},
        onClickDetailsFn: {
            type: Boolean,
            default() {
                return true;
            },
        },
        small: {
            type: Boolean,
            default() {
                return false;
            },
        },
    },
    // 方法
    methods: {
        goDetails(pid) {
            if (!this.onClickDetailsFn) {
                return
            }
            this.$router.push({
                name: "Details",
                query: {
                    pid
                },
            });
        }
    },


    filters: {
        capitalize: (value, tf) => {
            if (tf) {
                value = value.slice(0, value.length - 3)
            }
            // 
            return value
        }
    }
}
</script>

<style lang="less" scoped>
.proItem {
    div {
        width: 100%;

        .proItemImg {
            width: 100%;
            display: block;
        }
    }

    .p1 {
        font-size: 14px;
        color: #646566;
        margin: 10px 0 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
    }

    .p2 {
        color: #999999;
        margin-bottom: 10px;
        padding-right: 10px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
    }

    .p3 {
        font-size: 14px;
        color: #0c34ba;
        font-weight: 600;
    }
}
</style>